<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <script crossorigin="anonymous" src="/__dist__/botframework-webchat-fluent-theme.production.min.js"></script>
  </head>

  <body>
    <main id="webchat"></main>
    <script type="text/babel">
      run(async function () {
        const {
          React,
          ReactDOM: { render },
          WebChat: { FluentThemeProvider, ReactWebChat }
        } = window; // Imports in UMD fashion.

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        const App = () => <ReactWebChat directLine={directLine} store={store} />;

        render(
          <FluentThemeProvider>
            <App />
          </FluentThemeProvider>,
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        await (await directLine.emulateOutgoingActivity("What's the weather like today?")).resolveAll();

        await directLine.emulateIncomingActivity({
          type: 'message',
          text: 'The weather is sunny and warm.',
          from: {
            role: 'bot'
          },
          locale: 'en-US',
          entities: [],
          channelData: {
            feedbackLoop: {
              type: 'default',
              disclaimer:
                'We may contact you at klewis@contoso.microsoft.com about your feedback. Learn more about how this data is used and your rights. By pressing Submit, your feedback will be used to improve our products and services. Privacy statement.'
            }
          }
        });

        await pageConditions.numActivitiesShown(2);

        await (await directLine.emulateOutgoingActivity('How is the weather in Seattle today?')).resolveAll();

        await directLine.emulateIncomingActivity({
          id: 'a-00001',
          type: 'message',
          text: "I'm not sure how to help with that.",
          from: {
            role: 'bot'
          },
          locale: 'en-US',
          entities: [],
          channelData: {
            feedbackLoop: {
              type: 'default',
              disclaimer:
                'We may contact you at klewis@contoso.microsoft.com about your feedback. Learn more about how this data is used and your rights. By pressing Submit, your feedback will be used to improve our products and services. Privacy statement.'
            }
          }
        });

        await pageConditions.numActivitiesShown(4);

        pageElements.byTestId('send box text area').focus();
        await host.sendShiftTab(2);

        await host.sendKeys('ENTER');
        await host.sendKeys('SPACE');

        await pageConditions.became(
          'feedback form is open',
          () => document.activeElement === pageElements.byTestId('feedback sendbox'),
          1000
        );

        await pageConditions.scrollStabilized();
        await host.snapshot('local');

        await host.sendKeys('Test feedback');

        const { activity } = await directLine.actPostActivity(async () => {
          await host.sendTab(2);
          await host.sendKeys('ENTER');
        });

        expect(activity).toEqual(
          expect.objectContaining({
            type: 'invoke',
            name: 'message/submitAction',
            replyToId: 'a-00001',
            value: {
              actionName: 'feedback',
              actionValue: {
                reaction: 'like',
                feedback: {
                  feedbackText: expect.any(String)
                }
              }
            }
          })
        );
      });
    </script>
  </body>
</html>
